<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
    <title>点击查看原图</title>
    <style>
        .showimg>img{width:200px;max-width:100%;}
        span{display:none;position:fixed;left:0;top:0;width:100%;height:100%;z-index:20;opacity:0;}
        .showimg:focus+span{display:block;}
        .showimg:focus{position:fixed;content:"";z-index:10;left:0;top:0;width:100%;height:100%;background-color:rgba(0,0,0,.9);}
        .showimg:focus>img{position:absolute;z-index:11;left:0;top:0;right:0;bottom:0;width:auto;height:auto;margin:auto;}
    </style>
</head>
<body>
<a href="javascript:;" tabindex="-1" class="showimg"><img src="img/1.jpg" alt="" /></a><span></span>
</body>
</html>